<template>
  <div class="BuryingReport">
    <el-card shadow="hover">
      <div class="searchBox">
        <div class="oneBox">
          <el-input placeholder="请输入内容" v-model="eventName">
            <template slot="prepend">事件名称</template>
          </el-input>
          <el-button class="btn" @click="searchBth">搜索</el-button>
        </div>
        <br />
        <el-radio-group
          v-model="platform"
          fill="#39383D"
          @change="platformChange"
        >
          <el-radio-button label="">全部</el-radio-button>
          <el-radio-button label="android">Android</el-radio-button>
          <el-radio-button label="ios">IOS</el-radio-button>
        </el-radio-group>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="user_id" label="用户ID"> </el-table-column>
        <el-table-column prop="event_name" label="事件名称"> </el-table-column>
        <el-table-column prop="ext_field_name" label="上报字段标识">
        </el-table-column>
        <el-table-column prop="create_time" label="上报时间"> </el-table-column>
        <el-table-column prop="ext_field_value" label="上报内容">
        </el-table-column>
        <el-table-column prop="platform" label="平台"> </el-table-column>
        <el-table-column prop="client_version" label="版本"> </el-table-column>
        <el-table-column prop="utm_source" label="渠道"> </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="page"
        :limit.sync="pageSize"
        @pagination="getList"
      />
    </el-card>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import { BuryingReport } from "@/api/DataAnalysis";
export default {
  components: { Pagination },
  data() {
    return {
      eventName: "",
      platform: "",
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      total: 0,
      page: 1,
      pageSize: 10,
    };
  },
  methods: {
    platformChange() {
      this.page = 1;
      this.getList();
    },
    searchBth() {
      this.page = 1;
      this.getList();
    },
    getList() {
      BuryingReport({
        page: this.page,
        pageSize: this.pageSize,
        eventName: this.eventName,
        platform: this.platform,
      }).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.list;
          this.total = res.data.total;
        }
      });
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style lang="less" scoped>
.BuryingReport {
  margin: 30px;
  height: 100%;
  .searchBox {
    margin-bottom: 20px;
    .oneBox {
      display: flex;
      width: 50%;
      .el-input {
        margin-right: 20px;
        width: 260px;
      }
    }
  }
  /deep/.el-table td,
  /deep/.el-table th.is-leaf {
    border: none !important;
  }
}
</style>

